import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, Input, Button} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'

import './index.less'
import './cash_now.less'

// import icon_83 from "../../assets/img/icon_83.png";
import icon_84 from "../../assets/img/icon_84.png";
import icon_84_on from "../../assets/img/icon_84_on.png";
import icon_85 from "../../assets/img/icon_85.png";


// 立即提现
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Cash extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    cashType:2, // 提现方式1：微信钱包 2：银行卡
    items: [],
    currentBankNo: null, // 银行卡ID
    cardName:'', // 银行卡姓名 ,
    cardNumber:'', // 银行卡号 ,
    bankCode:'', // 银行编码 ,
    amount: 0, // 提现金额
    serviceMoney: {}, // 服务费
    userInfo: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'立即提现' })
    this.getUserCards()
    this.getCashService()
    this.setState({
      userInfo: getRuntime().getUserInfo()
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeCashType(cashType:number){
    this.setState({
      cashType
    })
  }

  getCashService() {
    let { userStore } = this.props.stores
    userStore.getCashService({
      callback: res => {this.setState({ serviceMoney: res })}
    })
  }

  getUserCards() {
    let { userStore } = this.props.stores
    userStore.getUserCards({
      callback: res => {
        this.setState({
          items: toJS(res.items)
        })
      }
    })
  }

  changeBank(item: number) {
    this.setState({
      currentBankNo: item.id,
      cardName: item.cardName,
      cardNumber: item.cardNumber,
      bankCode: item.bankCode,
    })
  }

  // 截取银行卡后四位
  getPartBankNo(bankNo: string){
    if(bankNo.length<5){ return bankNo }
    return bankNo.substr(-4)
  }

  setAmount() {
    this.setState({ amount: this.state.userInfo.commision })
  }

  inputChange(e) {
    this.setState({ amount:  e.detail.value })
  }

  // 提现
  submit() {
    let {amount,cardName,cardNumber,bankCode,userInfo} = this.state
    if(!amount){ getRuntime().showToast('请填写提现金额~');return }
    if(amount>userInfo.commision){ getRuntime().showToast('您的余额不够~');return }
    if(!cardName||!cardNumber||!bankCode){ getRuntime().showToast('请选择银行卡~');return; }
    let { userStore } = this.props.stores
    userStore.cash({
      form: {
        cardName,
        cardNumber,
        bankCode,
        amount
      },
      callback: res => {
        // console.log(res)
        getRuntime().wxPay(JSON.parse(res.payParams), () => {
          getRuntime().showToast('提现成功~')
          setTimeout(() => {
            getRuntime().navigateTo('/pages/user/cash_success')
          },2000)
        })
      }
    })
  }

  render() {
    let { cashType,items,currentBankNo,serviceMoney,userInfo,amount } = this.state
    let commision = userInfo.commision
    let service = (commision*serviceMoney.value).toFixed(2)
    return (
      <View className='my-my_cash_now'>

       <View className='header'>
         <View className='list-desc'>请输入提现金额（元）</View>
         <View className='input-group'>
           <Input className='from-input' name='amount' type={"number"} onChange={this.inputChange.bind(this)} placeholderClass='placeholder_class' placeholder='￥0.00' />
         </View>
         {
           amount&&
           <View className='info'>
              额外扣除{service}元手续费<Text className='color color-orange'>(费率{serviceMoney['value']}%)</Text>
           </View>
         }
         {
           !amount&&
           <View className='info'>
              当前收益余额{commision}元，<Text className='color' onClick={this.setAmount.bind(this)}>全部提现</Text>
           </View>
         }
       </View>

        <View className='type-item'>
         {/* <View className='item' onClick={this.changeCashType.bind(this, 1)}>
            <Image src={icon_83} className='type-icon'/>
            <View className='list-title'>微信钱包</View>
            {cashType===1&& <Image src={icon_84} className='check-icon'/>}
            {cashType!==1&& <Image src={icon_84_on} className='check-icon'/>}
          </View>*/}
          <View className='item' onClick={this.changeCashType.bind(this, 2)} >
            <Image src={icon_85} className='type-icon'/>
            <View className='list-title'>银行卡</View>
            {/*{cashType===2&& <Image src={icon_84} className='check-icon'/>}
            {cashType!==2&& <Image src={icon_84_on} className='check-icon'/>}*/}
          </View>

          <View className={cashType===2 ? 'item-sub item-sub-on' : 'item-sub'}>
            {items&&
              items.map(item => {
                return(
                  <View className='op' onClick={this.changeBank.bind(this, item)}>
                    <View className='list-title'>{item.bankName}（{this.getPartBankNo(item.cardNumber)}）</View>
                    {currentBankNo===item.id&& <Image src={icon_84} className='check-icon'/>}
                    {currentBankNo!==item.id&& <Image src={icon_84_on} className='check-icon'/>}
                  </View>
                )
              })
            }
            <View className='op' onClick={this.handelRouter.bind(this,'/pages/user/bank_card_add')}>
              <View className='list-title'>+ 使用新卡提现</View>
            </View>
          </View>
        </View>
       <View className='from-wrap'>
         <Button formType={"submit"} className='btn-line-submit' onClick={this.submit.bind(this)}>确认提现</Button>
         <View className='submit-preview'>预计4小时内到账</View>
       </View>
      </View>
    )
  }
}

export default Cash
